<script>
import BottomButton from "../../../components/shiqinComponents/shiqinButton/bottomButton.vue";

export default {
  name: "anniversaryContent",
  components: {BottomButton},
  data() {
    return {
      anniversaryList: [
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        },
        {
          name: '张三的新婚纪念日',
          day: '288',
          date: '2022年6月9日',
          anniversary: 10
        }
      ]
    }
  },
  props:{
    bottomFlag:{
      type:Boolean,default:false
    }
  }
}
</script>

<template>
  <view class="anniversaryContent allColumnCenter">
    <view class="anniversaryContent_search allRowCenter">
      <view class="anniversaryContent_search_content allRowCenter">
        <image class="anniversaryContent_search_content_image" src="/static/shiqin-images/search.png"
               mode="widthFix"></image>
        <text class="anniversaryContent_search_content_text">请输入姓名</text>
      </view>
    </view>
    <view class="anniversaryContent_info mb-20" v-for="(item,index) in anniversaryList" :key="index">
      <image v-if="index%5 === 0" class="anniversaryContent_info_image"
             src="/static/shiqin-images/first.png"></image>
      <image v-if="index%5 === 1" class="anniversaryContent_info_image"
             src="/static/shiqin-images/second.png"></image>
      <image v-if="index%5 === 2" class="anniversaryContent_info_image"
             src="/static/shiqin-images/third.png"></image>
      <image v-if="index%5 === 3" class="anniversaryContent_info_image"
             src="/static/shiqin-images/fourth.png"></image>
      <image v-if="index%5 === 4" class="anniversaryContent_info_image"
             src="/static/shiqin-images/fifth.png"></image>
      <view class="anniversaryContent_info_content z-1 row items-center">
        <view class="anniversaryContent_info_content_left ml-20">
          <view class="anniversaryContent_info_content_left_name">
            <text class="anniversaryContent_info_content_left_name_text">{{ item.name }}</text>
          </view>
          <view class="anniversaryContent_info_content_left_date mt-24">
            <text class="anniversaryContent_info_content_left_date_text">{{ item.date }}</text>
          </view>
        </view>
        <view class="anniversaryContent_info_content_right ml-127">
          <view class="anniversaryContent_info_content_right_day">
            <text class="anniversaryContent_info_content_right_day_text">{{ item.day }}</text>
            <text class="anniversaryContent_info_content_right_day_textTip">天</text>
          </view>
          <view class="anniversaryContent_info_content_right_anniversary">
            <text class="anniversaryContent_info_content_right_anniversary_text">距离{{ item.anniversary }}周年</text>
          </view>
        </view>
      </view>
    </view>
<!--    <view class="anniversaryContent_bottomButton allRowCenter mt-50" @click.stop="$nav.navigateTo('/pages/familyAnniversary/anniversary')">-->
<!--      <text class="anniversaryContent_bottomButton_text">添加纪念日</text>-->
<!--    </view>-->
    <bottom-button :title="'添加纪念日'" :isFixed="bottomFlag" class="mt-50" @elementClick="$nav.navigateTo('/pages/familyAnniversary/anniversary')"></bottom-button>
    <view style="height: 80rpx"></view>
  </view>
</template>

<style scoped lang="scss">
.anniversaryContent {
  width: 702rpx;

  .anniversaryContent_search {
    width: 702rpx;
    height: 144rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    border-top: 2rpx solid #E5E5E5;

    .anniversaryContent_search_content {
      width: 661rpx;
      height: 80rpx;
      background: #E5E5E5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .anniversaryContent_search_content_image {
        width: 32rpx;
        height: 32rpx;
      }

      .anniversaryContent_search_content_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #A0A0A0;
      }
    }
  }

  .anniversaryContent_info {
    position: relative;
    width: 702rpx;
    height: 155rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;

    .anniversaryContent_info_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 702rpx;
      height: 155rpx;
    }

    .anniversaryContent_info_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 702rpx;
      height: 155rpx;

      .anniversaryContent_info_content_left {
        .anniversaryContent_info_content_left_name {
          .anniversaryContent_info_content_left_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #292929;
          }
        }

        .anniversaryContent_info_content_left_date {
          .anniversaryContent_info_content_left_date_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 300;
            font-size: 24rpx;
            color: #292929;
          }
        }
      }

      .anniversaryContent_info_content_right {
        .anniversaryContent_info_content_right_day {
          .anniversaryContent_info_content_right_day_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 60rpx;
            color: #FF4206;
          }

          .anniversaryContent_info_content_right_day_textTip {
            font-family: PingFang SC, PingFang SC;
            font-weight: 300;
            font-size: 16rpx;
            color: #292929;
          }
        }

        .anniversaryContent_info_content_right_anniversary {
          .anniversaryContent_info_content_right_anniversary_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 300;
            font-size: 24rpx;
            color: #292929;
          }
        }
      }
    }
  }

  .anniversaryContent_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .anniversaryContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>